<!--
 * @Author: cheung0
 * @Date: 2021-11-13 21:28:46
-->
<template>
  <div class="wrapper">
    <div class="container">
      <h1>校园失物招领平台</h1>
      <form class="form" @keyup.enter.native="doLogin">
        <input type="text" placeholder="学号" v-model="table.userName"/>
        <input type="password" placeholder="密码" v-model="table.password"/>
        <button type="submit" id="login-button" @click.prevent="doLogin">登录</button>
        <router-link to="register" tag="li" style="margin-top: 10px" class="router-link-active" @click.native="gotoRegister">未注册 去注册！</router-link>
      </form>
    </div>

    <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      `
    </ul>
  </div>
</template>

<script>
import {createNamespacedHelpers} from "vuex";

const {mapActions: loginMapActions} = createNamespacedHelpers("userlogin");
export default {
  name: "login",
  data() {
    return {
      table: {
        userName: "",
        password: "",
      },
    };
  },
  methods: {
    ...loginMapActions(["login"]),
    async doLogin() {
      await this.login(this.table);
    },
    gotoRegister() {
      this.$message.success({
        message:"请注册"
      })
    }
  }
}
</script>

<style lang="less">
@prim: #813e14;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  font-weight: 300;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  color: white;
  font-weight: 300;

  ::-webkit-input-placeholder {
    /* WebKit browsers */
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    font-weight: 300;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    font-weight: 300;
  }
}

.wrapper {
  position: fixed;
  background-image: url("~@/assets/background.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;

  &.form-success {
    .container {
      h1 {
        transform: translateY(85px);
      }
    }
  }
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 160px 0;
  height: 400px;
  text-align: center;

  h1 {
    color: @prim;
    font-size: 40px;
    transition-duration: 1s;
    font-weight: 200;
  }
}

form {
  padding: 20px 0;
  position: relative;
  z-index: 2;

  input {
    display: block;
    appearance: none;
    outline: 0;
    border: 1px solid fade(white, 40%);
    background-color: fade(white, 20%);
    width: 250px;

    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;

    color: white;

    transition-duration: 0.25s;
    font-weight: 300;

    &:hover {
      background-color: fade(white, 40%);
    }

    &:focus {
      background-color: white;
      width: 300px;

      color: @prim;
    }
  }

  button {
    appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: @prim;
    border-radius: 3px;
    width: 250px;
    cursor: pointer;
    font-size: 18px;
    transition-duration: 0.25s;

    &:hover {
      background-color: rgb(245, 247, 249);
    }
  }
}

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 1;

  li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: fade(white, 15%);
    bottom: -160px;

    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;

    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;

    &:nth-child(1) {
      left: 10%;
    }

    &:nth-child(2) {
      left: 20%;

      width: 80px;
      height: 80px;

      animation-delay: 2s;
      animation-duration: 17s;
    }

    &:nth-child(3) {
      left: 25%;
      animation-delay: 4s;
    }

    &:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;

      animation-duration: 22s;

      background-color: fade(white, 25%);
    }

    &:nth-child(5) {
      left: 70%;
    }

    &:nth-child(6) {
      left: 80%;
      width: 120px;
      height: 120px;

      animation-delay: 3s;
      background-color: fade(white, 20%);
    }

    &:nth-child(7) {
      left: 32%;
      width: 160px;
      height: 160px;

      animation-delay: 7s;
    }

    &:nth-child(8) {
      left: 55%;
      width: 20px;
      height: 20px;

      animation-delay: 15s;
      animation-duration: 40s;
    }

    &:nth-child(9) {
      left: 25%;
      width: 10px;
      height: 10px;

      animation-delay: 2s;
      animation-duration: 40s;
      background-color: fade(white, 30%);
    }

    &:nth-child(10) {
      left: 90%;
      width: 160px;
      height: 160px;

      animation-delay: 11s;
    }
  }
}

@-webkit-keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}

@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}

.router-link-active:hover {
  font-size: large;
  color: orangered;
}
</style>
